<template>
  <div class="container">
    <toolbar :title="$route.meta.title" :back="true" :home="true"></toolbar>
    <section class="tab">
      <cube-tab-bar v-model="selectedLabel" show-slider>
        <cube-tab v-for="item in tabs" :label="item" :key="item"></cube-tab>
      </cube-tab-bar>
    </section>
    
    <div class="t-container">
      <scroll>
        <cube-tab-panels v-model="selectedLabel">
          <cube-tab-panel :label="tabs[0]">
            <section class="panel">
              <login-for-pwd></login-for-pwd>
            </section>
          </cube-tab-panel>
          <cube-tab-panel :label="tabs[1]">
            <section class="panel">
              <login-for-tel></login-for-tel>
            </section>
          </cube-tab-panel>
        </cube-tab-panels>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar";
import Scroll from 'components/Scroll'

import LoginForPwd from './components/LoginForPwd'
import LoginForTel from './components/LoginForTel'

export default {
  name: "Login",
  components: {
    Toolbar,
    LoginForPwd,
    LoginForTel,
    Scroll
  },
  data() {
    return {
      selectedLabel: "账户密码",
      tabs: ["账户密码", "手机验证码"]
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl'
.container {
  height 100vh
  background #FFF

  .tab {
    height $toolbar-height 
    background #FFF
  
    & >>> .cube-tab-bar  {
      height 100%

      .cube-tab-bar-slider {
          background-color $colorPrimary
      }
      .cube-tab_active {
        color $colorPrimary
      }
    }
  }

  .t-container {
    top $toolbar-height * 2
  }

  .panel {
    padding 25px 15px 0 15px
  }
}
</style>
